<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek 分析报告</title>
    <style>
        :root {
            --primary-blue: #2563eb;
            --accent-red: #dc2626;
            --background-light: #f8fafc;
            --text-dark: #1e293b;
        }

        body {
            font-family: 'Inter', 'Microsoft YaHei', sans-serif;
            line-height: 1.8;
            margin: 0;
            padding: 2rem;
            background: var(--background-light);
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }

        .analysis-section {
            margin: 1.5rem 0;
            padding: 1rem 1rem 1rem 0.5rem; /* 调整左侧内边距 */
            border-left: 3px solid var(--primary-blue);
            border-radius: 4px;
            transition: transform 0.3s ease;
        }

        .analysis-section:hover {
            transform: translateY(-2px);
        }

        .section-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            margin-left: -0.5rem; /* 向左微调 */
        }

        .section-icon {
            width: 28px;
            height: 28px;
            background: var(--primary-blue);
            border-radius: 4px;
            margin-right: 8px; /* 缩小图标间距 */
            display: grid;
            place-items: center;
            color: white;
            font-size: 0.9em;
        }

         .section-content {
            color: var(--text-dark);
            text-align: justify;
            padding-left: 1rem; /* 内容区缩进 */
            margin-left: 0.5rem;
            line-height: 1.8;
            position: relative;
        }

        .highlight-number {
            color: var(--accent-red);
            font-weight: 600;
            padding: 0 2px;
            font-family: 'Menlo', monospace;
        }

        .empty-state {
            text-align: center;
            color: #64748b;
            padding: 2rem;
        }

        @media (max-width: 768px) {
            body {
                padding: var(--spacing-unit);
            }
            .container {
                padding: calc(var(--spacing-unit) * 3);
                border-radius: 0.75rem;
            }
            .section-content {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 style="text-align: center; margin-bottom: 2.5rem;">
            <span style="border-bottom: 3px solid var(--primary-blue); padding-bottom: 0.75rem;">
                空气质量 预测结果
            </span>
        </h1>

        {% if data is defined and data %}
            {# 智能数据预处理 #}
            {% set processed_data = data.split('\n\n') if data is string else data %}

            {% for paragraph in processed_data %}
                {% if paragraph|trim %}
                    <div class="analysis-section">
                        <div class="section-header">
                            <div class="section-icon">{{ loop.index }}</div>
                            <div style="font-size: 1.1em; color: var(--primary-blue);">
                                预测结果 {{ loop.index }}
                            </div>
                        </div>
                        <div class="section-content">
                            {{ paragraph|trim|replace('\n', '<br>')|safe }}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        {% else %}
            <div class="empty-state">
                🧐 未获取到分析内容，请检查API连接
            </div>
        {% endif %}
    </div>

    <script>
        (function() {
            'use strict';

            // 配置参数
            const config = {
                contentClass: 'section-content',
                numberRegex: /(-?\d[\d,]*\.?\d*%?)(?![^<]*>)/g,
                highlightClass: 'highlight-number'
            };

            // 数字高亮处理器
            function highlightNumbers() {
                const containers = document.getElementsByClassName(config.contentClass);

                Array.from(containers).forEach(container => {
                    const walker = document.createTreeWalker(
                        container,
                        NodeFilter.SHOW_TEXT,
                        null,
                        false
                    );

                    let node;
                    while ((node = walker.nextNode())) {
                        if (node.parentNode.classList.contains(config.highlightClass)) continue;

                        const newHTML = node.textContent.replace(
                            config.numberRegex,
                            `<span class="${config.highlightClass}">$1</span>`
                        );

                        if (newHTML !== node.textContent) {
                            const temp = document.createElement('div');
                            temp.innerHTML = newHTML;
                            node.parentNode.replaceChild(temp, node);
                        }
                    }
                });
            }

            // 初始化
            document.addEventListener('DOMContentLoaded', highlightNumbers);

            // 动态内容观察器
            if (typeof MutationObserver !== 'undefined') {
                const observer = new MutationObserver(mutations => {
                    mutations.forEach(() => highlightNumbers());
                });
                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            }
        })();
    </script>
</body>
</html>
